<!DOCTYPE html>
<html lang="en">

<head>
	<title>THREEJS</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="./main.css" />
</head>

<body>
	<div id="loading"></div>
	<div id="bar">
		<div>JK架 <span id="JKFrameRemove">-</span><span id="JKFrameAdd">+</span></div>
		<div>G1架 <span id="G1FrameRemove">-</span><span id="G1FrameAdd">+</span></div>
		<div>G2架 <span id="G2FrameRemove">-</span><span id="G2FrameAdd">+</span></div>
		<div>GL1架 <span id="GL1FrameRemove">-</span><span id="GL1FrameAdd">+</span></div>
		<div class="line"></div>
		<div>Z1架 <span id="Z1FrameRemove">-</span><span id="Z1FrameAdd">+</span></div>
		<div>Z2架 <span id="Z2FrameRemove">-</span><span id="Z2FrameAdd">+</span></div>
		<div>Z3架 <span id="Z3FrameRemove">-</span><span id="Z3FrameAdd">+</span></div>
		<div>Z4架 <span id="Z4FrameRemove">-</span><span id="Z4FrameAdd">+</span></div>
		<div>Z5架 <span id="Z5FrameRemove">-</span><span id="Z5FrameAdd">+</span></div>
		<div class="line"></div>
		<div>Z6架 <span id="Z6FrameRemove">-</span><span id="Z6FrameAdd">+</span></div>
		<div>Z7架 <span id="Z7FrameRemove">-</span><span id="Z7FrameAdd">+</span></div>
		<div>Z8架 <span id="Z8FrameRemove">-</span><span id="Z8FrameAdd">+</span></div>
		<div>ZY1架 <span id="ZY1FrameRemove">-</span><span id="ZY1FrameAdd">+</span></div>
		<div>ZY2架 <span id="ZY2FrameRemove">-</span><span id="ZY2FrameAdd">+</span></div>
		<div class="line"></div>
		<div>计轴机柜 <span id="JZJGFrameRemove">-</span><span id="JZJGFrameAdd">+</span></div>
		<div>微机监测机柜 <span id="WJJCJGFrameRemove">-</span><span id="WJJCJGFrameAdd">+</span></div>
		<div>联锁A机柜 <span id="LSAJGFrameRemove">-</span><span id="LSAJGFrameAdd">+</span></div>
		<div>联锁B机柜 <span id="LSBJGFrameRemove">-</span><span id="LSBJGFrameAdd">+</span></div>
		<div>防雷柜 <span id="FLGFrameRemove">-</span><span id="FLGFrameAdd">+</span></div>
		<div>CTC工控机柜 <span id="CTCGKJGFrameRemove">-</span><span id="CTCGKJGFrameAdd">+</span></div>
		<div>CTC采集机柜 <span id="CTCCJJGFrameRemove">-</span><span id="CTCCJJGFrameAdd">+</span></div>
		<div>调车监控柜 <span id="DCJKGFrameRemove">-</span><span id="DCJKGFrameAdd">+</span></div>
		<div class="line"></div>
		<div>机器人 <span id="Robot4">4</span><span id="Robot3">3</span><span id="Robot2">2</span><span id="Robot1">1</span>
		</div>
	</div>
	<canvas id="mainCanvas"></canvas>
	<script type="importmap">
		{
			"imports": {
				"three": "../../build/three.module.js",
				"three/addons/": "../jsm/"
			}
		}
	</script>
	<script type="module">
		import * as THREE from 'three';
		import Stats from 'three/addons/libs/stats.module.js';
		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
		import { House } from './js/house.js';
		import { RobotAdd } from './js/robot.js';
		import { ModelClick } from './js/modelClick.js';
		import { SceneKey, SceneMove } from './js/sceneMove.js';
		// import { modelAdd, modelAnimate } from './js/modelOpera.js';
		loading();
		// 创建渲染器
		let renderer = new THREE.WebGLRenderer({
			antialias: true,// 是否开启反锯齿
			premultipliedAlpha: true,//  图像的分辨率
			preserveDrawingBuffer: true,// 是否保存绘图缓冲
			stencil: true,// 8位的模板缓存
			depth: true,// 6位的深度缓存
			precision: "highp",// 着色精度选择
			canvas: document.getElementById('mainCanvas')
		});
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.outputEncoding = THREE.sRGBEncoding;
		renderer.setClearColor(0xffffff);
		// 透视摄像机
		let camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000000);
		camera.position.set(700, 700, 0);
		// 缩放、滚动、拖动
		let controls = new OrbitControls(camera, renderer.domElement);
		// 旋转速度
		controls.rotateSpeed = 3;
		// 缩放速度
		controls.zoomSpeed = 1.2 * 3;
		// 相机平移速度
		controls.panSpeed = 0.3 * 3;
		// 阻尼系数,越小则滑动越大
		controls.dynamicDampingFactor = 0.2;
		// 相机位置和焦点与焦点和最上方组成的最大夹角限制
		controls.minPolarAngle = 0;
		controls.maxPolarAngle = Math.PI / 2;
		// fps显示
		const container = document.createElement('div');
		document.body.appendChild(container);
		let stats = new Stats();
		container.appendChild(stats.dom);
		// 初始化场景
		let scene = new THREE.Scene();
		// 加入灯光
		const AmbientLight = new THREE.AmbientLight(0x666666);
		scene.add(AmbientLight);
		const SpotLight = new THREE.SpotLight(0xcccccc);
		SpotLight.position.set(300, 550, 0);
		scene.add(SpotLight);
		// 创建动画时钟
		let mixer = new THREE.AnimationMixer();
		let clock = new THREE.Clock();
		// 鼠标键盘监听
		new ModelClick(scene, renderer, camera, mixer, (newMixer) => {
			mixer = newMixer;
		});
		new SceneKey();
		new House(scene);
		// 这段代码要修改
		new RobotAdd(scene);
		// const robotData = [
		// 	{ url: './model/249HumanAnimated.fbx', name: '机器人动画3', num: 1, x: 0, y: 0, z: 0 }
		// ];
		// new modelAdd(robotData, (group) => {
		// 	console.log(group.children[0])
		// 	scene.add(group);
		// 	setTimeout(() => {
		// 		mixer = new THREE.AnimationMixer(group.children[0]);
		// 		const action = mixer.clipAction(group.children[0].animations[1]);
		// 		action.play();
		// 	}, 3000);
		// })
		// 初始化
		animate();
		// 屏幕大小监听
		window.onresize = function () {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
		}
		// 加载进度条
		function loading() {
			THREE.DefaultLoadingManager.onLoad = function () {
				setTimeout(function () {
					document.getElementById('loading').style.display = 'none';
				}, 500);
			};
			THREE.DefaultLoadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {
				document.getElementById('loading').innerHTML = '加载文件: ' + url + ' , ' + itemsLoaded + ' / ' + itemsTotal;
			};
		}
		function animate() {
			requestAnimationFrame(animate);
			new SceneMove(camera);
			renderer.render(scene, camera);
			stats.update();
			mixer.update(clock.getDelta());
		}
	</script>
</body>

</html>